/*
 * @Author: Kingsley 
 * @Date: 2018-10-27 23:44:04 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-28 14:59:46
 */
<template>
    <div class="order-list w" v-loading="pageData.loading">
        <el-card class="box-card" shadow="always">
            <el-table :header-cell-style="{background:'#f5f7fa'}" :data="order.orderItemVoList" style="width: 100%" v-for="(order,index) in resData.orderList" :key="index">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">

                            <el-form-item label="订单号：">
                                <div>{{ props.row.orderNo }}</div>
                            </el-form-item>

                            <el-form-item label="状态：">
                                <div>{{ props.row.enableStatusDes }}</div>
                            </el-form-item>

                            <el-form-item label="支付方式：">
                                <div>{{ order.paymentTypeDesc }}</div>
                            </el-form-item>

                            <el-form-item label="创建时间：">
                                <div>{{ order.createTime }}</div>
                            </el-form-item>

                            <el-form-item label="商品名称：">
                                <div>{{ props.row.productName }}</div>
                            </el-form-item>

                            <el-form-item label="所属店铺：">
                                <div>樱花树下-等花开</div>
                            </el-form-item>

                            <el-form-item label="小小卖家：">
                                <span>{{ props.row.sellerName }}</span>
                            </el-form-item>

                            <el-form-item label="收件人：">
                                <span>{{order.shippingVo.receiverName }}-{{order.shippingVo.receiverPhone}}</span>
                            </el-form-item>

                            <el-form-item label="收货地址：">
                                <span>{{order.shippingVo.receiverProvince}}{{order.shippingVo.receiverCity}}{{order.shippingVo.receiverAddress}}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column :label='"订单号："+order.orderNo'>
                    <template slot-scope="scope">
                        <img :src="scope.row.productImage" alt="" style="width:80px;height:80px;border:1px solid #fafafa">
                    </template>
                </el-table-column>
                <el-table-column label="" prop="productName">
                </el-table-column>
                <el-table-column label="" prop="quantity">
                </el-table-column>
                <el-table-column label="" prop="currentUnitPrice">
                </el-table-column>
                <el-table-column :label='"订单总价："+order.payment' prop="totalPrice">
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top:10px;text-align: left">
                <el-pagination background layout="prev, pager, next"
                 :total="pageData.table"
                 :page-size="pageData.requestData.pageSize"
                  @prev-click="clickPre" 
                  @next-click="clickNext"
                  @current-change="clickOrderPage">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Tips from "@/utils/tipsUtil";
import Order from "@/service/order-service";
import RulesUtil from "@/utils/rulesUtil";
const _tips = new Tips();
const _order = new Order();
const _regular = new RulesUtil();
export default {
  data() {
    return {
      pageData: {
        loading: true,
        total: 0,
        requestData: {
          pageNum: 1,
          pageSize: 4
        }
      },

      resData: {
        orderList: null
      }
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.requestOrders();
    },

    /**
     * 点击分页组件的上一页
     */
    clickPre() {
      const vue = this;
      vue.pageData.requestData.pageNum--;
      vue.requestOrders();
    },

    /**
     * 点击分页组件的下一页
     */
    clickNext() {
      const vue = this;
      vue.pageData.requestData.pageNum++;
      vue.requestOrders();
    },

    /**
     * 点击页数
     */
    clickOrderPage(page){
        const vue = this;
        vue.pageData.requestData.pageNum = page
        vue.requestOrders()
    },

    /**
     * 请求订单列表
     */
    requestOrders() {
      const vue = this;
      _order.orderList(vue.pageData.requestData).then(
        res => {
          vue.resData.orderList = res.data.list;
          //关闭加载的logo
          vue.pageData.total = res.data.total;
          vue.pageData.loading = false;
        },
        res => {
          _tips.notifyTips(vue, res.msg);
          //关闭加载的logo
          vue.pageData.loading = false;
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
//订单确认-展开的样式
.demo-table-expand {
  font-size: 0;
  padding: 0 10px;
  background-color: #fafafa;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
  font-weight: bold;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-table {
  margin-top: 20px;
  .has-gutter {
      
  }
}
</style>
